<!--
 * @Description:  playback -- 回放文档模式
 * @Author: your name
 * @Date: 2024-03-02
 * @LastEditTime: 2024-03-02
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="playback">
      <div class="template_box heart_w">
        <header id="pc_header">
          <div class="header_container">
            <div class="header_left">
              <router-link class="back" :to="{ path: '/homes_tabs' }">
                <img src="@/assets/images/back.png" alt="" />
                <span>返回课程大纲</span>
              </router-link>
            </div>
            <div class="title_back">
              <p>技术测试直播间-文档模式</p>
              <p>直播时间：2024-03-01 13:49-13:51</p>
            </div>
          </div>
        </header>
        <div class="middle_top">
          <div class="left_t" :class="{ rightfull: left_val }">
            <div class="middle-main">
              <div id="playbackPlayer">
                <iframe
                  v-show="docVideo"
                  id="inlineFrameExample"
                  title="Inline Frame Example"
                  width="100%"
                  height="100%"
                  src="https://www.rongyuejiaoyu.com/uploads/20240128/bb6932218c9f2b4187bf304f9fff0e3d.pdf"
                  frameborder="0"
                >
                </iframe>
                <div v-if="!docVideo">视频</div>
              </div>
            </div>
            <div class="middle_toolbar" id="controlbar">
              <div id="pcToolbar" class="toolabr">
                <div class="progress-box" id="progress-box">
                  <div class="background" id="background"></div>
                  <div
                    class="buffer"
                    id="buffer"
                    :style="{ width: buffwidth + '%' }"
                  ></div>
                  <div
                    class="progress"
                    id="progress"
                    :style="{ width: progresswidth + '%' }"
                  ></div>
                  <span
                    class="dot"
                    id="dot"
                    @mousedown="moveprogress"
                    :style="{ left: progresswidth + '%' }"
                  >
                  </span>
                </div>

                <div class="controls">
                  <div class="left">
                    <div class="play" @click="playback">
                      <i class="el-icon-video-play" v-if="play"></i>
                      <i class="el-icon-video-pause" v-else></i>
                    </div>
                    <div class="time">
                      <span>00:35</span>/<span>01:41</span>
                    </div>
                  </div>
                  <div class="right_btn">
                    <ul class="tools">
                      <li title="清晰度" class="rate">
                        <div class="rate-div" @click="distinctBtn">
                          <span>{{ distinct }}</span>
                        </div>
                        <div class="select" v-if="distinct_Val">
                          <li
                            v-for="(item_t, index) in dis_video"
                            :key="index"
                            @click="yuamhua(item_t)"
                          >
                            <a
                              href="javascript:void(0);"
                              :class="{
                                act_col: distinct == item_t
                              }"
                            >
                              {{ item_t }}
                            </a>
                          </li>
                        </div>
                      </li>
                      <li title="倍速" class="rate">
                        <div class="rate-div" @click="showrate">
                          <span>{{ speedNum }}</span>
                        </div>
                        <div class="select" v-if="rateshow">
                          <li
                            v-for="(item_bs, index) in velocity"
                            :key="index"
                            @click="changevoule(item_bs)"
                          >
                            <a
                              href="javascript:void(0);"
                              :class="{
                                act_col: item_bs == speedNum
                              }"
                            >
                              {{ item_bs }}
                            </a>
                          </li>
                        </div>
                      </li>
                      <li class="yl rate" :class="{ yinl: !volume }">
                        <i class="iconfont icon-yinliang" @click="yliang"></i>
                        <div
                          class="volume-slider"
                          id="volume-slider"
                          v-if="volume"
                        >
                          <div
                            class="v-progress"
                            id="v-progress"
                            :style="{ width: voulewidth + '%' }"
                          ></div>
                          <div
                            class="v-dot"
                            id="v-dot"
                            @mousedown="move"
                            :style="{ left: voulewidth - 3 + '% !important' }"
                          ></div>
                        </div>
                      </li>
                      <li class="switch_t rate" @click="switch_t">
                        <i class="iconfont icon-banbenqiehuan"></i>
                      </li>
                      <li class="fullscreen rate" @click="fullscreen">
                        <i class="iconfont icon-fangda"></i>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="right_chat"
            style="background: #18191e"
            v-show="!left_val"
          >
            <div class="expand">
              <span>{{ video_t ? '文档区域' : '视频区域' }}</span>
              <div>
                <i class="el-icon-arrow-up" @click="videoDoc" v-if="video_t">
                </i>
                <i class="el-icon-arrow-down" @click="videoDoc" v-else></i>
              </div>
            </div>

            <div class="cc_small_widnow_wrap">
              <!-- <div class="pick-up">
                <i class="el-icon-s-fold"></i>
              </div> -->
              <div class="video_box" v-show="!video_t">
                <div id="playbackPlayer">
                  <iframe
                    id="inlineFrameExample"
                    title="Inline Frame Example"
                    v-show="!docVideo"
                    width="100%"
                    height="100%"
                    src="https://www.rongyuejiaoyu.com/uploads/20240128/bb6932218c9f2b4187bf304f9fff0e3d.pdf"
                    frameborder="0"
                  >
                  </iframe>
                  <div v-if="docVideo">视频</div>
                </div>
              </div>
            </div>

            <div class="chat-main">
              <div class="chat-title">
                <h4>聊天</h4>
              </div>
              <div class="chat-list l-r-m" :class="{ lrm_list: !video_t }">
                <ul id="chat-list" style="top: 0px">
                  <li class="me" v-for="item in 5" :key="item">
                    <div class="peo-infos">
                      <p class="peo-names">
                        <span class="p-n-names">自立</span>
                        <!-- <i class="peo-icons"></i> -->
                      </p>
                    </div>
                    <div class="peo-chat">
                      <i class="icons"></i>
                      <p class="chat-content">可以听见</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'playback',
  data() {
    return {
      play: false,
      rateshow: false,
      velocity: ['2.0X', '1.5X', '1.25X', '1.0X', '0.8X'],
      voulewidth: 100,
      volume: false,
      speedNum: '倍速', //倍速数据
      distinct: '原画',
      distinct_Val: false,
      dis_video: ['原画', '高清'],
      buffwidth: 0, //buff 宽度
      progresswidth: 0, //进度 宽度
      left_val: false,
      video_t: false,
      docVideo: false
    }
  },
  created() {},
  methods: {
    moveprogress() {},
    move() {},
    fullscreen() {
      this.left_val = !this.left_val
    },
    videoDoc() {
      this.video_t = !this.video_t
    },
    switch_t() {
      this.docVideo = !this.docVideo
    },
    changevoule(e) {
      this.rateshow = !this.rateshow
      this.speedNum = e
    },
    showrate() {
      this.rateshow = !this.rateshow
    },
    yuamhua(e) {
      this.distinct = e
      this.distinct_Val = !this.distinct_Val
    },
    distinctBtn() {
      this.distinct_Val = !this.distinct_Val
    },
    playback() {
      this.play = !this.play
    },
    yliang() {
      this.volume = !this.volume
    }
  }
}
</script>

<style scoped lang="scss">
.act_col {
  color: #ff920a !important;
}

#playbackPlayer {
  height: inherit;
  width: inherit;
}

.icon-fangda {
  font-size: 24px;
  font-weight: bold;
}

.yinl {
  margin-right: 0 !important;
}
.yl {
  .icon-yinliang {
    font-size: 24px;
    font-weight: bold;
  }
}

.switch_t {
  margin-right: 0 !important;
  .icon-banbenqiehuan {
    font-size: 22px;
    font-weight: bold;
  }
}

.playback {
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('http://material.csslcloud.net/image/ECB81750584E9A75/161897768731311.png');
  background-color: rgb(7, 6, 3);
  width: 100%;
  min-height: 100vh;
  // overflow-x: hidden;
}

.header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  line-height: 25px;

  .title_back {
    flex: 3;
  }

  .header_left {
    display: flex;
    flex: 2;
    align-items: center;
    justify-content: space-between;
    .back {
      height: 30px;
      float: left;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 10px;
      justify-content: space-between;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}

#pc_header {
  width: 100%;
  font-family: 'Microsoft Yahei';
  height: 60px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(1turn, transparent, rgba(0, 0, 0, 0.6));
}

.middle_top {
  display: flex;

  .right_chat {
    width: 24.63rem;
    height: 45.86rem;
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);

    .chat-main {
      position: absolute;
      width: 18.53rem;
      .chat-title {
        padding: 0 0.5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
        height: 33px;
        background-color: #2e3138;

        h4 {
          color: #ffffff;
          font-weight: normal;
          border-bottom: 2px solid #ff842f;
          height: 1.5rem;
          font-size: 14px;
        }
      }

      .l-r-m {
        padding-bottom: 10px;
        overflow: hidden;
        overflow-y: auto;
        border-top: 1px solid #ddd;
      }

      .lrm_list {
        height: 29.34rem !important;
      }

      .chat-list {
        background-color: #fff;
        overflow: hidden;
        overflow-y: auto;
        position: absolute;
        width: 18.53rem;
        height: 40.34rem;
        border-top: 1px solid #ddd;
      }

      .me {
        padding: 0 10px 0;
        clear: both;

        .peo-infos {
          position: relative;
          width: 100%;
          height: 40px;
          .peo-names {
            position: absolute;
            right: 0;
            .p-n-names {
              color: #e67410;
              cursor: text;
              font-size: 14px;
            }

            // .peo-icons {
            //   left: -18px;
            //   right: inherit;
            //   position: absolute;
            //   top: 12px;
            //   right: -22px;
            //   width: 17px;
            //   height: 17px;
            // }
          }
        }

        .peo-chat {
          position: relative;
          max-width: 160px;
          margin-top: -10px;
          padding: 10px 12px 8px;
          border-radius: 4px;
          margin-left: 10px;
          float: right;
          background: #ffaa5f;
          border: 1px solid #ff902e;
          .icons {
            position: absolute;
            top: 10px;
            width: 7px;
            height: 10px;
            left: inherit;
            right: -7px;
            background-image: url('@/assets/images/live-icons2.png');
            background-repeat: no-repeat;
            background-position: -35px -135px;
          }
        }
      }
    }

    .expand {
      height: 2.76rem;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px 8px 0 0;
      background: #22222a;
      color: #fff;

      div {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #414145;
        text-align: center;
        line-height: 25px;
      }

      span {
        font-size: 14px;
      }

      .el-icon-arrow-up,
      .el-icon-arrow-down {
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transform: scale(0.9);
        color: #e1e4e6;
      }
    }
  }

  .rightfull {
    width: 100% !important;
  }
  .left_t {
    // width: 74.88rem;
    width: calc(100% - 12px);
    margin-right: 8px;
    background-color: #fff;
    border-radius: 8px 8px 0 0;

    .middle-main {
      position: relative;
      width: 100%;
      height: 42.13rem;
      background-color: #fff;
      overflow: hidden;
      z-index: 1;
      border-radius: 8px 8px 0 0;
    }

    .middle_toolbar {
      width: 100%;
      height: 3.13rem;
      box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
      position: relative;
    }

    .toolabr {
      position: absolute;
      width: 100%;
      height: 3.13rem;
      background: rgba(34, 34, 34, 0.6);
      z-index: 9;
      cursor: pointer;
      border-radius: 0 0 8px 8px;
    }
  }
}

#pcToolbar {
  width: 100%;
  position: absolute;
  left: 0px;
  right: 10px;
  bottom: -10px;
  height: 50px;
  background-color: #f1f1f1;
  z-index: 9;
  .progress-box {
    position: absolute;
    height: 4px;
    top: -4px;
    width: 100%;
    .background {
      position: absolute;
      background: #757575;
      height: 100%;
      width: 100%;
      z-index: -2;
    }
    .buffer {
      position: absolute;
      height: 100%;
      background: #999999;
      width: 67.5%;
      z-index: -1;
    }
    .progress {
      height: 100%;
      background: #ff920a;
      width: 0%;
      float: left;
    }
    .dot {
      background-color: #ffffff;
      border: 1px solid #ff920a;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      position: absolute;
      left: -1px;
      top: -5px;
    }
  }
  .controls {
    width: 100%;
    height: 100%;
    padding: 10px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #1f1b19;

    .left {
      display: flex;

      .play {
        margin: 0 1rem;
        line-height: 3.13rem;
        color: hsla(0, 0%, 100%, 0.8);

        .el-icon-video-play,
        .el-icon-video-pause {
          line-height: 3.13rem;
          font-size: 32px;
        }
      }

      .time {
        line-height: 3.13rem;
        font-size: 14px;
        color: hsla(0, 0%, 100%, 0.8);
      }
    }

    .right_btn {
      .tools {
        display: flex;
        font-size: 14px;
        color: #fff;
        list-style: none;

        .volume-slider {
          display: inline-block;
          width: 6rem;
          height: 6px;
          background-color: #b3b3b3;
          border: none;
          vertical-align: 2px;
          margin-left: 10px;
          position: relative;
          border-radius: 5px;

          .v-progress {
            background: #ff920a;
            border-radius: 5px;
            width: 100%;
            height: 100%;
            float: left;
          }
          .v-dot {
            background-color: #ffffff;
            border: 1px solid #ff920a;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            outline: none;
            display: block;
            float: left;
            cursor: pointer;
            position: absolute;
            // left: 0px;
            left: 92px !important;
            top: -3px;
          }
        }
        .rate-div {
          min-width: 3.58rem;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: center;
          height: 2rem;
          background: hsla(0, 0%, 100%, 0.1);
          padding: 0 4px;
          border-radius: 4px;
        }

        .rate-div + .select {
          position: absolute;
          bottom: 3.2rem;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(34, 34, 34, 0.7);
          border-radius: 4px;
          width: 3.5rem;
          padding: 0.3rem 0;
          li {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2.23rem;
            color: hsla(0, 0%, 100%, 0.8);
          }
        }

        .rate {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 0.8rem;
          height: 3.23rem;
          position: relative;
          color: hsla(0, 0%, 100%, 0.8);
          z-index: 9999;
          min-width: 2.88rem;
        }
      }
    }
  }
}

.cc_small_widnow_wrap {
  .video_box {
    height: 10.88rem;
    width: 100%;
    background-color: #969696;
  }
}
</style>
